<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        p{
            text-align: center;
            color: #336699;
        }
        
        button{
            margin-bottom: 10px;
        }
        
        #ss{
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <p>公式单元格显示公式/数值切换</p>
    <h6>点击按钮留意E4的变化</h6>
    <button id="btn">显示/隐藏公式</button>
    <div id="ss"></div>
    <script type="text/javascript">
        // Title:显示公式
        // Description：显示公式
        // Tag:公式
        
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet2 = spread.getActiveSheet();
        var spreadNS = GC.Spread.Sheets;
        sheet2.setArray(1, 1, [
            ["序号", "底边长", "高", "面积"],
            [1, 4, 5],
            [2, 3, 4]
        ]);
        sheet2.addSpan(0, 1, 1, 4);
        sheet2.setValue(0, 1, "计算三角形面积");
        sheet2.getRange(0, 1, 1, 1).hAlign(spreadNS.HorizontalAlign.center);
        sheet2.setFormula(2, 4, '=(C3*D3)/2');
        sheet2.setValue(2, 0, '使用普通公式:');
        sheet2.setValue(3, 0, '使用自定义单元格:');
        sheet2.setFormula(3, 4, '=(C4*D4)/2');
        sheet2.setColumnWidth(4, 180);
        
        function ShowFormula() {}
        ShowFormula.prototype = new GC.Spread.Sheets.CellTypes.Text();
        ShowFormula.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
            let formula = context.sheet.getFormula(context.row, context.col);
            // 判断当formulaFlg为true时才显示
            if (formulaFlg && formula) {
                value = "=" + formula;
            }
            spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
        }
        
        // 控制是否显示formula
        var formulaFlg = false;
        
        function showFormulaFun() {
            formulaFlg = !formulaFlg;
            sheet2.repaint();
        }
        showFormulaFun();
        $("#btn").click(showFormulaFun);
        var showFormulaType = new ShowFormula();
        sheet2.setCellType(3, 4, showFormulaType);
    </script>
</body>

</html>